<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue';
import { createDraw } from '@/api/ol-api/createDraw';
import { Query } from '@/api/mapgis-api/Query';
import SearchResult from './SearchResult.vue';
const { proxy } = getCurrentInstance();
const showDialog = ref(false); // 对话框的显示隐藏
const searchData = ref([]);

let map = null; // 解决外部访问不到map
let featuresAll = ref([]); // 存储所有事件要素
const service = {
  docName: import.meta.env.VITE_MAPGIS_DOC_NAME,
  layerId: 2,
};
onMounted(() => {
  map = proxy.$map;
  //console.log(map);
  map.addLayer(layer_icon);
  map.addLayer(layer);
  // 获取所有事件要素
  Query.queryByLayerId(service).then((res) => {
    featuresAll.value = res;
    // console.log(featuresAll.value);
  });
});

/* 设置icon标注图层 
      需求: 根据处理状态显示不同颜色标注
      思路: 不能给图层设置统一style,需要设置每个要素的style
*/
// 不同处理状态做一个图片地址映射
const icon_map = {
  0: new URL('@/assets/images/定位-红色.png', import.meta.url).href, // 待处理
  1: new URL('@/assets/images/定位-黄色.png', import.meta.url).href, // 正在处理
  2: new URL('@/assets/images/定位-绿色.png', import.meta.url).href, // 已处理
};
// 封装三种标注样式函数
const iconStyleSet = (num) => {
  // console.log(new URL(icon_map[num], import.meta.url).href); // 拿不到地址
  // console.log(new URL('@/assets/images/定位-红色.png', import.meta.url).href); // 能拿到地址
  // 返回三种icon_style
  return new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 60],
      anchorOrigin: 'top-right',
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      offsetOrigin: 'top-right',
      // offset:[0,10],
      //图标缩放比例
      scale: 0.8,
      //透明度
      opacity: 0.9,
      //图标的url
      src: icon_map[num], // 这里num是变量,不能.num访问
      // src: new URL('@/assets/images/定位.png', import.meta.url).href,
      // src:'@/assets/images/定位.png',
    }),
  });
};
const source_icon = new ol.source.Vector();
const layer_icon = new ol.layer.Vector({
  source: source_icon,
  // style: icon_style,
});

/* 设置画笔 */
let source = new ol.source.Vector({});
let layer = new ol.layer.Vector({
  source,
});
let draw = createDraw({
  type: 'Box',
  source,
  success: async (feature) => {
    // 新一次绘制前移除之前的标注icon
    source_icon.clear();
    // 移除矩形画笔
    setTimeout(() => {
      source.clear();
    }, 500);
    //移除画笔
    map.removeInteraction(draw);
    let geometry = feature.getGeometry();
    // console.log(geometry)// 画笔的界址点
    let features = await Query.queryByGeometry({
      geometry,
      service,
    });
    /* 这里查询两次,是因为复杂内存,
          icon的要素和热力图使用的props.searchData是同一个指向的,
          需要查询两次来区分或者第三方库lodash实现深拷贝
    */
    let features_icon = await Query.queryByGeometry({
      geometry,
      service,
    });
    // 深拷贝
    // let features_icon = JSON.parse(JSON.stringify(features));
    // console.log(features);
    // 设置对话框的显示
    showDialog.value = true;
    // 模态框的值
    searchData.value = features;
    // console.log(searchData.value)
    // 要素数组setStyle需要遍历,否则会报错
    features_icon.forEach((feature) => {
      // console.log(feature.values_.values_.处理状态);
      if (feature.values_.values_.处理状态 == 0) {
        feature.setStyle(iconStyleSet(0));
      }
      if (feature.values_.values_.处理状态 == 1) {
        feature.setStyle(iconStyleSet(1));
      }
      if (feature.values_.values_.处理状态 == 2) {
        feature.setStyle(iconStyleSet(2));
      }
    });
    // 把查询到的事件要素添加到标注图层
    layer_icon.getSource().addFeatures(features_icon);
  },
});
/* 移除画笔 */
draw.on('drawend', (evt) => {
  map.removeInteraction(draw);
});
/* 激活画笔 */
function activeDraw() {
  map.addInteraction(draw);
}
defineExpose({ activeDraw }); // 暴露给父组件调用


function handleClearSource() {
  source_icon.clear();
  source.clear();

}
</script>

<template>
  <SearchResult v-model="showDialog" :searchData="searchData" @ClearSource="handleClearSource"/>
</template>

<style></style>
